<template>
    <!--pages/category/category.wxml-->

    <view class="container">


        <!-- 头部搜索区 -->

        <view class="search-bar">
            <view @tap="toSearchPage" class="search-box">
                <image class="search-img" src="/static/images/icon/search.png"></image>
                <text class="sear-input">搜索您想要的商品</text>
            </view>
        </view>
        <!-- 滚动内容区 -->
        <view class="main">
            <!-- 左侧菜单start -->
            <scroll-view class="leftmenu" scroll-y="true">
                <block :key="index" v-for="(item, index) in categoryList">
                    <view :class="'menu-item ' + (selIndex==index?'active':'') + ' '" :data-id="item.categoryId"
                          :data-index="index" @tap="onMenuTab">
                        {{item.categoryName}}
                    </view>
                </block>
                <view class="ca-empty" v-if="!categoryList || !categoryList.length">暂无分类</view>
            </scroll-view>
            <!-- 左侧菜单end -->

            <!-- 右侧内容start -->
            <scroll-view class="rightcontent" scroll-y="true">
                <!-- <block wx:for='{{ productList}}' wx:key=''> -->
                <view class="adver-map" v-if="categoryImg">
                    <view class="item-a">
                        <image :src="categoryImg" mode="widthFix"></image>
                    </view>
                </view>
                <view class="cont-item" v-if="productList.length">
                    <block :key="index" v-for="(item, index) in productList">
                        <view :data-prodid="item.prodId" @tap="toProdPage" class="show-item">
                            <view class="more-prod-pic">
                                <image :src="item.pic" class="more-pic" mode="widthFix"></image>
                            </view>
                            <view class="prod-text-right">
                                <view class="prod-text more">{{item.prodName}}</view>
                                <view class="cate-prod-info">{{item.brief}}</view>
                                <view class="prod-price more">
                                    <text class="symbol">￥</text>
                                    <text class="big-num">{{wxs.parsePrice(item.price)[0]}}</text>
                                    <text class="small-num">.{{wxs.parsePrice(item.price)[1]}}</text>
                                </view>
                            </view>
                        </view>

                    </block>
                </view>
                <view class="cont-item empty" v-if="!productList.length">{{categoryList && categoryList.length ?
                    '该分类下暂无商品' : '暂无商品'}}
                </view>
                <!-- </block> -->
            </scroll-view>
            <!-- 右侧内容end -->
            <!-- </block> -->
        </view>

    </view>
</template>

<script lang="wxs" module="wxs" src="../../wxs/number.wxs"></script>

<script>
    // pages/category/category.js
    var http = require("../../utils/http.js");
    var config = require("../../utils/config.js");

    export default {
        data() {
            return {
                selIndex: 0,
                categoryList: [],
                productList: [],
                categoryImg: '',
                prodid: ''
            };
        },

        components: {},
        props: {},

        /**
         * 生命周期函数--监听页面加载
         */
        onLoad: function (options) {
            var ths = this; //加载分类列表

            var params = {
                url: "/category/categoryInfo",
                method: "GET",
                data: {
                    parentId: ''
                },
                callBack: function (res) {
                    // console.log(res);
                    ths.setData({
                        categoryImg: res[0].pic,
                        categoryList: res
                    });
                    ths.getProdList(res[0].categoryId);
                }
            };
            http.request(params);
        },

        /**
         * 生命周期函数--监听页面初次渲染完成
         */
        onReady: function () {
        },

        /**
         * 生命周期函数--监听页面显示
         */
        onShow: function () {
        },

        /**
         * 生命周期函数--监听页面隐藏
         */
        onHide: function () {
        },

        /**
         * 生命周期函数--监听页面卸载
         */
        onUnload: function () {
        },

        /**
         * 页面相关事件处理函数--监听用户下拉动作
         */
        onPullDownRefresh: function () {
        },

        /**
         * 页面上拉触底事件的处理函数
         */
        onReachBottom: function () {
        },

        /**
         * 用户点击右上角分享
         */
        onShareAppMessage: function () {
        },
        methods: {
            /**
             * 分类点击事件
             */
            onMenuTab: function (e) {
                console.log(e);
                var id = e.currentTarget.dataset.id;
                var index = e.currentTarget.dataset.index; // this.getProdList(id);

                this.getProdList(this.categoryList[index].categoryId);
                this.setData({
                    categoryImg: this.categoryList[index].pic,
                    selIndex: index
                });
            },
            // 跳转搜索页
            toSearchPage: function () {
                uni.navigateTo({
                    url: '/pages/search-page/search-page'
                });
            },

            getProdList(categoryId) {
                //加载分类列表
                var params = {
                    url: "/prod/pageProd",
                    method: "GET",
                    data: {
                        categoryId: categoryId
                    },
                    callBack: res => {
                        // console.log(res);
                        this.setData({
                            productList: res.records
                        });
                    }
                };
                http.request(params);
            },

            //跳转商品详情页
            toProdPage: function (e) {
                var prodid = e.currentTarget.dataset.prodid;
                uni.navigateTo({
                    url: '/pages/prod/prod?prodid=' + prodid
                });
            }
        }
    };
</script>
<style>
    @import "./category.css";
</style>
